<template>
	<view class="layout" v-if="isH5">
		<view class="sider" :class="{ collapsed }">
			<view class="logo">
				<view class="logo-icon">
					<text class="iconfont icon-xitong logo-icon-text"></text>
				</view>
				<text class="brand">校园互助+</text>
			</view>
			
		<view class="nav-menu">
			<!-- 数据中心分组 -->
			<view class="nav-group">
				<view class="nav-group-header" @click="toggleDataMenu" :class="{ active: dataMenuExpanded || isDataPage }">
					<text class="iconfont icon-shishifenxi nav-icon"></text>
					<text class="nav-text">数据中心</text>
					<text class="expand-icon" :class="{ expanded: dataMenuExpanded }">▶</text>
				</view>
				<view class="nav-submenu" :class="{ expanded: dataMenuExpanded }">
					<navigator url="/pages/admin/analytics/index" class="nav-subitem" :class="{ active: activeKey === 'analytics' }">
						<text class="nav-subtext">数据分析</text>
					</navigator>
					<navigator url="/pages/admin/analytics-reports/index" class="nav-subitem" :class="{ active: activeKey === 'analytics-reports' }">
						<text class="nav-subtext">数据报表</text>
					</navigator>
				</view>
			</view>

			<!-- 用户管理分组 -->
			<view class="nav-group">
				<view class="nav-group-header" @click="toggleUserMenu" :class="{ active: userMenuExpanded || activeKey === 'users' }">
					<text class="iconfont icon-yonghuguanli nav-icon"></text>
					<text class="nav-text">用户管理</text>
					<text class="expand-icon" :class="{ expanded: userMenuExpanded }">▶</text>
				</view>
			<view class="nav-submenu" :class="{ expanded: userMenuExpanded }">
				<navigator url="/pages/admin/users/index" class="nav-subitem" :class="{ active: currentPage === 'users-roles' }">
					<text class="nav-subtext">用户列表</text>
				</navigator>
				<navigator url="/pages/admin/users/violations" class="nav-subitem" :class="{ active: currentPage === 'users-violations' }">
					<text class="nav-subtext">违规记录</text>
				</navigator>
				<navigator url="/pages/admin/users/permissions" class="nav-subitem" :class="{ active: currentPage === 'users-permissions' }">
					<text class="nav-subtext">权限设置</text>
				</navigator>
				<navigator url="/pages/admin/users/points" class="nav-subitem" :class="{ active: currentPage === 'users-points' }">
					<text class="nav-subtext">积分管理</text>
				</navigator>
			</view>
				</view>

			<!-- 内容管控分组 -->
			<view class="nav-group">
				<view class="nav-group-header" @click="toggleContentMenu" :class="{ active: contentMenuExpanded || isContentPage }">
					<text class="iconfont icon-jiankong nav-icon"></text>
					<text class="nav-text">内容管控</text>
					<text class="expand-icon" :class="{ expanded: contentMenuExpanded }">▶</text>
				</view>
			<view class="nav-submenu" :class="{ expanded: contentMenuExpanded }">
				<navigator url="/pages/admin/audit-workbench/index" class="nav-subitem" :class="{ active: activeKey === 'audit-workbench' || currentPage === 'audit-workbench' }">
					<text class="nav-subtext">审核工作台</text>
				</navigator>
				<navigator url="/pages/admin/task-audit/index" class="nav-subitem" :class="{ active: activeKey === 'task-audit' }">
					<text class="nav-subtext">任务审核</text>
				</navigator>
				<navigator url="/pages/admin/activity-audit/index" class="nav-subitem" :class="{ active: activeKey === 'activity-audit' }">
					<text class="nav-subtext">活动审核</text>
				</navigator>
				<navigator url="/pages/admin/post-audit/index" class="nav-subitem" :class="{ active: activeKey === 'post-audit' }">
					<text class="nav-subtext">帖子审核</text>
				</navigator>
			<navigator url="/pages/admin/audit-history/index" class="nav-subitem" :class="{ active: activeKey === 'audit-history' || currentPage === 'audit-history' }">
				<text class="nav-subtext">审核记录查询</text>
			</navigator>
		<navigator url="/pages/admin/rejected-content/index" class="nav-subitem" :class="{ active: activeKey === 'rejected-content' || currentPage === 'rejected-content' }">
			<text class="nav-subtext">内容复审管理</text>
		</navigator>
		</view>
		</view>

		<!-- 订单与交易管理分组 -->
		<view class="nav-group">
			<view class="nav-group-header" @click="toggleOrderMenu" :class="{ active: orderMenuExpanded || isOrderPage }">
				<text class="iconfont icon-jiaoyi nav-icon"></text>
				<text class="nav-text">订单与交易管理</text>
				<text class="expand-icon" :class="{ expanded: orderMenuExpanded }">▶</text>
			</view>
			<view class="nav-submenu" :class="{ expanded: orderMenuExpanded }">
				<navigator url="/pages/admin/order-management/index" class="nav-subitem" :class="{ active: activeKey === 'order-management' }">
					<text class="nav-subtext">订单列表</text>
				</navigator>
				<navigator url="/pages/admin/dispute-records/index" class="nav-subitem" :class="{ active: activeKey === 'dispute-records' }">
					<text class="nav-subtext">纠纷处理记录</text>
				</navigator>
				<navigator url="/pages/admin/refund-management/index" class="nav-subitem" :class="{ active: activeKey === 'refund-management' }">
					<text class="nav-subtext">退款管理</text>
				</navigator>
			</view>
		</view>

		<!-- 客服管理分组 -->
		<view class="nav-group">
			<view class="nav-group-header" @click="toggleCustomerServiceMenu" :class="{ active: customerServiceMenuExpanded || isCustomerServicePage }">
				<text class="iconfont icon-kefu nav-icon"></text>
				<text class="nav-text">客服管理</text>
				<text class="expand-icon" :class="{ expanded: customerServiceMenuExpanded }">▶</text>
			</view>
		<view class="nav-submenu" :class="{ expanded: customerServiceMenuExpanded }">
			<navigator url="/pages/admin/chat/index" class="nav-subitem" :class="{ active: activeKey === 'chat' }">
				<text class="nav-subtext">客服聊天</text>
			</navigator>
			<navigator url="/pages/admin/chat-statistics/index" class="nav-subitem" :class="{ active: activeKey === 'chat-statistics' }">
				<text class="nav-subtext">工作台统计</text>
			</navigator>
		</view>
		</view>
		</view>
			
			<!-- 侧边栏底部版权信息 -->
			<view class="sider-footer">
				<view class="copyright">
					<text class="copyright-text">© 2025 校园易互助</text>
					<text class="copyright-desc">管理后台</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="topbar">
				<view class="topbar-left">
					<text class="page-title">{{ tabTitle }}</text>
				<view class="breadcrumbs">
					<transition-group name="breadcrumb" tag="view" class="breadcrumb-container">
						<text 
							v-for="(bc,i) in breadcrumbs" 
							:key="`${bc}-${i}`" 
							class="breadcrumb-item" 
							:class="{ active: i === breadcrumbs.length - 1 }"
						>
							{{ bc }}
							<text v-if="i < breadcrumbs.length - 1" class="breadcrumb-separator">></text>
						</text>
					</transition-group>
				</view>
				</view>
				<view class="topbar-right">
					<view class="notification-btn">
						<text class="notification-icon">🔔</text>
						<view class="notification-badge">3</view>
					</view>
					<!-- 测试按钮 -->
					<!-- <button @click="toggleUserDropdown" style="margin-right: 10px; padding: 5px 10px; background: #007bff; color: white; border: none; border-radius: 4px;">测试</button> -->
					
					<view class="user-menu" @click.stop="toggleUserDropdown">
						<view class="user-avatar-small">
							<text class="avatar-text-small">{{ getAvatarText(username) }}</text>
						</view>
						<text class="user-name-small">{{ username }}</text>
						<text class="dropdown-arrow" :class="{ expanded: userDropdownVisible }">▾</text>
						
					<!-- 用户下拉菜单 -->
					<view class="user-dropdown" v-if="userDropdownVisible" @click.stop>
						<view class="dropdown-item" @click="viewProfile">
							<!-- <text class="dropdown-icon">👤</text> -->
							<text class="dropdown-text">个人资料</text>
						</view>
						<view class="dropdown-item" @click="changePassword">
							<!-- <text class="dropdown-icon">🔑</text> -->
							<text class="dropdown-text">修改密码</text>
						</view>
						<view class="dropdown-divider"></view>
						<view class="dropdown-item logout-item" @click="logout">
							<!-- <text class="dropdown-icon"></text> -->
							<text class="dropdown-text">退出登录</text>
						</view>
					</view>
					</view>
				</view>
			</view>
			<view class="content">
				<transition name="page-content" mode="out-in" appear>
					<view class="page-content-wrapper" :key="activeKey">
						<PageSkeleton v-if="isLoading" :itemCount="skeletonItemCount" />
						<view v-else class="page-content">
							<slot />
						</view>
					</view>
				</transition>
			</view>
		</view>
	</view>
	<view v-else class="content"><slot /></view>
</template>

<script>
import PageSkeleton from './PageSkeleton.vue'

export default {
	name:'AdminLayout',
	components: {
		PageSkeleton
	},
	props:{
		activeKey:{ type:String, default:'home' },
		tabTitle:{ type:String, default:'' },
		breadcrumbs:{ type:Array, default:()=>['首页'] },
		currentPage:{ type:String, default:'' },
		loading:{ type:Boolean, default:false },
		skeletonItemCount:{ type:Number, default:5 }
	},
	data(){
		return {
			collapsed:false,
			username:'管理员',
			isH5: process.env.VUE_APP_PLATFORM === 'h5',
			dataMenuExpanded: false,
			userMenuExpanded: false,
			contentMenuExpanded: false,
			orderMenuExpanded: false,
			customerServiceMenuExpanded: false,
			currentPath: '',
			isLoading: false,
			userDropdownVisible: false // 用户下拉菜单显示状态
		}
	},
	computed: {
		// 由于uni-app没有$route，我们通过props传递当前路径信息
		isDataPage() {
			return ['analytics', 'analytics-reports'].includes(this.activeKey)
		},
		isContentPage() {
			return ['audit-workbench', 'task-audit', 'activity-audit', 'post-audit', 'audit-history', 'rejected-content', 'community-audit', 'transaction-audit', 'content'].includes(this.activeKey)
		},
		isOrderPage() {
			return ['order-management', 'dispute-records', 'refund-management', 'order-detail'].includes(this.activeKey)
		},
	isCustomerServicePage() {
		return ['chat', 'chat-statistics'].includes(this.activeKey)
	}
	},
	watch: {
		activeKey(newKey, oldKey) {
			if (newKey !== oldKey) {
				this.isLoading = this.loading
				// 模拟页面切换时的短暂加载状态
				if (!this.loading) {
					this.isLoading = true
					setTimeout(() => {
						this.isLoading = false
					}, 500)
				}
			}
		},
		loading: {
			immediate: true,
			handler(newVal) {
				this.isLoading = newVal
			}
		}
	},
	mounted(){
		// 获取登录用户信息
		try {
			const userInfo = uni.getStorageSync('userInfo')
			if(userInfo && userInfo.username) {
				this.username = userInfo.nickname || userInfo.username
			}
		} catch(e) {
			console.log('获取用户信息失败:', e)
		}
		
		// 如果当前页面是数据中心相关页面，自动展开数据中心菜单
		if (this.isDataPage) {
			this.dataMenuExpanded = true;
		}
		
		// 如果当前页面是用户管理相关页面，自动展开用户管理菜单
		if (this.activeKey === 'users') {
			this.userMenuExpanded = true;
		}
		
		// 如果当前页面是内容管控相关页面，自动展开内容管控菜单
		if (this.isContentPage) {
			this.contentMenuExpanded = true;
		}
		
	// 如果当前页面是订单管理相关页面，自动展开订单管理菜单
	if (this.isOrderPage) {
		this.orderMenuExpanded = true;
	}
	
	// 如果当前页面是客服管理相关页面，自动展开客服管理菜单
	if (this.isCustomerServicePage) {
		this.customerServiceMenuExpanded = true;
	}
	
	// 添加全局点击事件监听器，用于关闭用户下拉菜单
	if (typeof document !== 'undefined') {
		document.addEventListener('click', this.handleGlobalClick);
	}
	},
	
	beforeDestroy() {
		// 移除全局点击事件监听器
		if (typeof document !== 'undefined') {
			document.removeEventListener('click', this.handleGlobalClick);
		}
	},
	methods:{
		activeClass(key){
			return {
				active: this.activeKey===key,
				collapsed: this.collapsed
			}
		},
	toggleDataMenu() {
		this.dataMenuExpanded = !this.dataMenuExpanded;
	},
	toggleUserMenu() {
		this.userMenuExpanded = !this.userMenuExpanded;
	},
	toggleContentMenu() {
		this.contentMenuExpanded = !this.contentMenuExpanded;
	},
	toggleOrderMenu() {
		this.orderMenuExpanded = !this.orderMenuExpanded;
	},
	toggleCustomerServiceMenu() {
		this.customerServiceMenuExpanded = !this.customerServiceMenuExpanded;
	},
		getAvatarText(username) {
			if (!username) return '?';
			// 如果是中文，取第一个字符
			if (/[\u4e00-\u9fa5]/.test(username)) {
				return username.charAt(0);
			}
			// 如果是英文，取前两个字母大写
			return username.substring(0, 2).toUpperCase();
		},
		
		// 切换用户下拉菜单显示状态
		toggleUserDropdown() {
			console.log('点击用户菜单，当前状态:', this.userDropdownVisible);
			this.userDropdownVisible = !this.userDropdownVisible;
			console.log('切换后状态:', this.userDropdownVisible);
		},
		
		// 全局点击事件处理器
		handleGlobalClick(event) {
			// 检查点击目标是否是任务操作按钮，如果是则不处理
			if (event.target && (
				event.target.classList.contains('audit-btn') ||
				event.target.closest('.audit-btn') ||
				event.target.closest('.task-actions') ||
				event.target.tagName === 'BUTTON'
			)) {
				console.log('点击了任务操作按钮，跳过全局处理');
				return;
			}
			
			console.log('全局点击事件触发，当前下拉菜单状态:', this.userDropdownVisible);
			if (this.userDropdownVisible) {
				console.log('关闭用户下拉菜单');
				this.userDropdownVisible = false;
			}
		},
		
		// 查看个人资料
		viewProfile() {
			this.userDropdownVisible = false;
			uni.showToast({
				title: '个人资料功能开发中',
				icon: 'none',
				duration: 2000
			});
		},
		
		// 修改密码
		changePassword() {
			this.userDropdownVisible = false;
			uni.showModal({
				title: '修改密码',
				content: '密码修改功能开发中，敬请期待！',
				showCancel: false,
				confirmText: '知道了'
			});
		},
		
		// 退出登录
		logout() {
			this.userDropdownVisible = false;
			uni.showModal({
				title: '退出登录',
				content: '确定要退出登录吗？',
				confirmText: '退出',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储的用户信息
						try {
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							uni.removeStorageSync('userId');
						} catch (e) {
							console.log('清除存储失败:', e);
						}
						
						// 显示退出成功提示
						uni.showToast({
							title: '已退出登录',
							icon: 'success',
							duration: 1500
						});
						
						// 延迟跳转到登录页面
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/auth/login'
							});
						}, 1500);
					}
				}
			});
		}
	}
}
</script>

<style scoped>
/* 整体布局 */
.layout {
	display: flex;
	height: 100vh;
	background: #f8fafc;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 引入阿里图标字体 */
@import url('@/static/fonts/iconfont.css');
.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 侧边栏 */
.sider {
	width: 360rpx;
	background: #fff;
	position: relative;
	transition: all 0.3s ease;
	border-right: 1rpx solid #f0f0f0;
	display: flex;
	flex-direction: column;
	box-shadow: 2rpx 0 8rpx rgba(0, 0, 0, 0.06);
}

.sider.collapsed {
	width: 120rpx;
}

/* Logo区域 */
.logo {
	display: flex;
	align-items: center;
	gap: 24rpx;
	padding: 48rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.logo-icon {
	width: 64rpx;
	height: 64rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.25);
}

.logo-icon-text {
	font-size: 36rpx;
	color: #fff;
}

.brand {
	color: #1f2937;
	font-size: 40rpx;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sider.collapsed .brand {
	opacity: 0;
	width: 0;
}

/* 导航区域 */
.nav-menu {
	flex: 1;
	padding: 20rpx 0;
	overflow-y: auto;
	max-height: calc(100vh - 280rpx); /* 为页脚留出空间 */
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 24rpx 32rpx;
	margin: 8rpx 24rpx;
	color: #6b7280;
	border-radius: 12rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.nav-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 0;
}

.nav-item:hover::before {
	transform: translateX(0);
}

.nav-item:hover {
	background: #f8fafc;
	color: #374151;
	transform: translateX(8rpx) scale(1.02);
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.nav-item.active {
	background: linear-gradient(135deg, #409eff 0%, #36a3ff 100%);
	color: #fff;
	transform: translateX(8rpx) scale(1.02);
	box-shadow: 0 8rpx 24rpx rgba(64, 158, 255, 0.3);
}

.nav-item.active::before {
	display: none;
}

/* 导航分组样式 */
.nav-group {
	margin: 8rpx 24rpx;
}

.nav-group-header {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 24rpx 32rpx;
	color: #6b7280;
	border-radius: 12rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.nav-group-header::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(107, 114, 128, 0.1), rgba(107, 114, 128, 0.05));
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 0;
}

.nav-group-header:hover::before {
	transform: translateX(0);
}

.nav-group-header:hover {
	background: rgba(107, 114, 128, 0.1);
	color: #374151;
	transform: translateX(6rpx) scale(1.01);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.nav-group-header.active {
	background: linear-gradient(135deg, #409eff 0%, #36a3ff 100%);
	color: #fff;
	transform: translateX(8rpx) scale(1.02);
	box-shadow: 0 6rpx 20rpx rgba(64, 158, 255, 0.25);
}

.nav-group-header.active::before {
	display: none;
}

.expand-icon {
	margin-left: auto;
	font-size: 24rpx;
	transition: transform 0.3s ease;
}

.expand-icon.expanded {
	transform: rotate(90deg);
}

/* 子菜单样式 */
.nav-submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.nav-submenu.expanded {
	max-height: 600rpx;
}

.nav-subitem {
	display: flex;
	align-items: center;
	padding: 16rpx 32rpx 16rpx 80rpx;
	color: #9ca3af;
	border-radius: 8rpx;
	margin: 4rpx 0;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.nav-subitem::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(64, 158, 255, 0.08), rgba(64, 158, 255, 0.02));
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 0;
}

.nav-subitem:hover::before {
	transform: translateX(0);
}

.nav-subitem:hover {
	background: rgba(156, 163, 175, 0.1);
	color: #6b7280;
	transform: translateX(4rpx);
}

.nav-subitem.active {
	background: rgba(64, 158, 255, 0.12);
	color: #409eff;
	font-weight: 600;
	transform: translateX(6rpx);
	box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.15);
}

.nav-subitem.active::before {
	display: none;
}

.nav-subitem.active::after {
	content: '';
	position: absolute;
	left: 60rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 8rpx;
	height: 8rpx;
	background: #409eff;
	border-radius: 50%;
}

.nav-subtext {
	font-size: 28rpx;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.nav-icon {
	font-size: 32rpx;
	line-height: 1;
	flex-shrink: 0;
	margin-right: 15rpx;
}

.nav-text {
	font-size: 30rpx;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.sider.collapsed .nav-text {
	opacity: 0;
	width: 0;
}

/* 侧边栏页脚 */
.sider-footer {
	border-top: 1rpx solid #f5f5f5;
	background: #fafafa;
	padding: 24rpx 32rpx;
}

.copyright {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
}

.copyright-text {
	font-size: 24rpx;
	color: #6b7280;
	font-weight: 500;
}

.copyright-desc {
	font-size: 20rpx;
	color: #9ca3af;
}

.sider.collapsed .copyright {
	align-items: center;
}

.sider.collapsed .copyright-text {
	font-size: 20rpx;
}

.sider.collapsed .copyright-desc {
	display: none;
}


/* 主内容区 */
.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #f8fafc;
}

/* 顶部栏 */
.topbar {
	height: 100rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: 32rpx;
}

.page-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1f2937;
	margin: 0;
}

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.breadcrumb-container {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.breadcrumb-item {
	color: #718096;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	gap: 16rpx;
	transition: all 0.3s ease;
}

.breadcrumb-item.active {
	color: #4a5568;
	font-weight: 600;
}

.breadcrumb-separator {
	color: #cbd5e0;
	font-size: 24rpx;
}

/* 面包屑动画 */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
	transition: all 0.25s ease-out;
}

.breadcrumb-enter-from {
	opacity: 0;
	transform: translateX(-12rpx);
}

.breadcrumb-leave-to {
	opacity: 0;
	transform: translateX(12rpx);
}

.breadcrumb-move {
	transition: transform 0.25s ease-out;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 32rpx;
}

.notification-btn {
	position: relative;
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: #f9fafb;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1rpx solid #e5e7eb;
}

.notification-btn:hover {
	background: #f3f4f6;
}

.notification-icon {
	font-size: 28rpx;
}

.notification-badge {
	position: absolute;
	top: -2rpx;
	right: -2rpx;
	width: 28rpx;
	height: 28rpx;
	background: #ef4444;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18rpx;
	font-weight: 600;
	border: 2rpx solid #fff;
}

.user-menu {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	background: #f9fafb;
	border: 1rpx solid #e5e7eb;
	cursor: pointer;
	transition: all 0.2s ease;
}

.user-menu:hover {
	background: #f3f4f6;
}

.user-avatar-small {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	background: #3b82f6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: #fff;
	font-size: 20rpx;
}

.avatar-text-small {
	font-size: 20rpx;
}

.user-name-small {
	font-size: 26rpx;
	font-weight: 500;
	color: #374151;
}

.dropdown-arrow {
	color: #9ca3af;
	font-size: 20rpx;
	transition: transform 0.2s ease;
}

.user-menu:hover .dropdown-arrow {
	transform: rotate(180deg);
}

.dropdown-arrow.expanded {
	transform: rotate(180deg);
}

/* 用户下拉菜单样式 */

.user-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8rpx;
	background: #fff;
	border: 1rpx solid #e5e7eb;
	border-radius: 12rpx;
	box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.1);
	min-width: 200rpx;
	z-index: 1000;
	animation: dropdown-fade-in 0.2s ease-out;
}

@keyframes dropdown-fade-in {
	from {
		opacity: 0;
		transform: translateY(-10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 20rpx;
	cursor: pointer;
	transition: background 0.2s ease;
	border-radius: 8rpx;
	margin: 4rpx;
}

.dropdown-item:hover {
	background: #f9fafb;
}

.dropdown-item.logout-item {
	color: #ef4444;
}

.dropdown-item.logout-item:hover {
	background: #fef2f2;
}

.dropdown-icon {
	font-size: 28rpx;
}

.dropdown-text {
	font-size: 26rpx;
	font-weight: 500;
}

.dropdown-divider {
	height: 1rpx;
	background: #e5e7eb;
	margin: 8rpx 12rpx;
}

/* 内容区域 */
.content {
	flex: 1;
	padding: 24rpx;
	overflow-y: auto;
	position: relative;
}

.page-content-wrapper {
	width: 100%;
	min-height: 100%;
}

.page-content {
	animation: content-fade-in 0.3s ease-out;
}

@keyframes content-fade-in {
	from {
		opacity: 0;
		transform: translateX(16rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 页面内容切换动画 */
.page-content-enter-active,
.page-content-leave-active {
	transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.page-content-enter-from {
	opacity: 0;
	transform: translateX(32rpx);
}

.page-content-leave-to {
	opacity: 0;
	transform: translateX(-32rpx);
}

.page-content-enter-to,
.page-content-leave-from {
	opacity: 1;
	transform: translateX(0);
}


/* 响应式设计 */
@media (max-width: 900px) {
	.sider {
		width: 300rpx;
	}
	
	.sider.collapsed {
		width: 120rpx;
	}
	
	.logo {
		padding: 40rpx 24rpx;
	}
	
	.logo-icon {
		width: 56rpx;
		height: 56rpx;
	}
	
	.logo-icon-text {
		font-size: 32rpx;
	}
	
	.brand {
		font-size: 36rpx;
	}
	
	.nav-menu {
		padding: 32rpx 0;
	}
	
	.nav-item {
		padding: 20rpx 24rpx;
		margin: 6rpx 16rpx;
	}
	
	.nav-icon {
		font-size: 32rpx;
	}
	
	.nav-text {
		font-size: 28rpx;
	}
	
	.topbar {
		padding: 0 24rpx;
	}
	
	.topbar-left {
		gap: 16rpx;
	}
	
	.page-title {
		font-size: 28rpx;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.sider-footer {
		padding: 20rpx 24rpx;
	}
	
	.copyright-text {
		font-size: 22rpx;
	}
	
	.copyright-desc {
		font-size: 18rpx;
	}
}
</style> 